<template>
  <el-dialog
    :visible.sync="dialogFormVisible"
    @close="close"
    width="80%"
    top="10"
    :title="lookOrEdit == 1?'新增':lookOrEdit == 2?'编辑':'查看'"
    :destroy-on-close="true"
  >
    <div v-loading="loading" class="readonly">
      <el-form :model="form" :rules="rules" ref="form">
        <el-row :gutter="20" style="background: #f8fbff;">
          <el-col :span="24">
            <span class="d-start title">单位信息</span>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="16">
            <el-form-item prop="dwmc" label="单位名称">
              <el-input
                size="medium"
                v-model.trim="form.dwmc"
                autocomplete="off"
                :disabled="lookOrEdit == 3"
                style="“outline:none;”"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="frxm" label="法定代表人">
              <el-input
                size="medium"
                v-model.trim="form.frxm"
                autocomplete="off"
                :disabled="lookOrEdit == 3"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item prop="clsj" label="成立日期">
              <el-date-picker
                value-format="yyyy-MM-dd"
                size="medium"
                v-model="form.clsj"
                type="date"
                placeholder="选择日期"
                style="width:100%"
                :disabled="lookOrEdit == 3"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="ygrs" label="员工人数（人）">
              <el-input
                size="medium"
                v-model.trim="form.ygrs"
                autocomplete="off"
                :disabled="lookOrEdit == 3"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="zzjgdm" label="组织机构代码">
              <el-input
                size="medium"
                v-model.trim="form.zzjgdm"
                autocomplete="off"
                :disabled="lookOrEdit == 3"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item prop="zjl" label="总经理">
              <el-input
                size="medium"
                v-model.trim="form.zjl	"
                autocomplete="off"
                :disabled="lookOrEdit == 3"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="zjldh" label="联系电话">
              <el-input
                size="medium"
                v-model="form.zjldh"
                autocomplete="off"
                :disabled="lookOrEdit == 3"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="zjlzc" label="职称">
              <el-input
                size="medium"
                v-model="form.zjlzc"
                autocomplete="off"
                :disabled="lookOrEdit == 3"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item prop="jsfzr" label="技术负责人">
              <el-input
                size="medium"
                v-model.trim="form.jsfzr"
                autocomplete="off"
                :disabled="lookOrEdit == 3"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="jsdh" label="联系电话">
              <el-input
                size="medium"
                v-model="form.jsdh"
                autocomplete="off"
                :disabled="lookOrEdit == 3"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="jszc" label="职称">
              <el-input
                size="medium"
                v-model="form.jszc"
                autocomplete="off"
                :disabled="lookOrEdit == 3"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item prop="qyzz" label="企业资质">
              <el-input
                size="medium"
                type="textarea"
                v-model.trim="form.qyzz"
                autocomplete="off"
                :disabled="lookOrEdit == 3"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="20" style="background: #f8fbff;">
        <el-col :span="24" class="d-between">
          <span class="d-start title">项目履历</span>
          <el-button
            size="medium"
            type="success"
            plain
            @click="add()"
            v-if="lookOrEdit != 3 && !isShow"
          >新增</el-button>
          <el-button size="medium" type="info" v-if="isShow">新增</el-button>
        </el-col>
      </el-row>
      <div class="main">
        <!-- join_eproject -->
        <el-table :data="form.join_eproject" style="width: 100%;" height="300px" ref="tab">
          <el-table-column label="序号" align="center">
            <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>

          <el-table-column label="项目名称" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.xmmc"
                :disabled="lookOrEdit == 3"
                @input="isAddShow(scope)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="项目开始日期" align="center">
            <template slot-scope="scope">
              <!-- <el-input v-model="scope.row.xmksrq"></el-input> -->
              <el-date-picker
                value-format="yyyy-MM-dd"
                size="medium"
                v-model="scope.row.xmksrq"
                type="date"
                placeholder="选择日期"
                style="width:100%"
                :disabled="lookOrEdit == 3"
                @input="isAddShow(scope)"
              ></el-date-picker>
            </template>
          </el-table-column>
          <el-table-column label="项目终止日期" align="center">
            <template slot-scope="scope">
              <!-- <el-input v-model="scope.row.xmjsrq"></el-input> -->
              <el-date-picker
                value-format="yyyy-MM-dd"
                size="medium"
                v-model="scope.row.xmjsrq"
                type="date"
                placeholder="选择日期"
                style="width:100%"
                :disabled="lookOrEdit == 3"
                @input="isAddShow(scope)"
              ></el-date-picker>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            width="200"
            align="center"
            v-if="lookOrEdit != 3"
          >
            <template slot-scope="scope">
              <el-button
                size="medium"
                type="danger"
                plain
                @click="del(scope.row,scope.$index)"
                v-if="lookOrEdit != 3"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-row :gutter="20">
        <el-col :span="24" style="background: #f8fbff;">
          <span class="d-start title">参与项目及标段</span>
        </el-col>
      </el-row>
      <div class="main">
        <!-- join_eproject -->
        <el-table :data="form.join_qyxmll" style="width: 100%;" height="300px">
          <el-table-column label="序号" align="center">
            <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>

          <el-table-column label="项目名称" prop="join_project.xmmc" align="center"></el-table-column>
          <el-table-column label="标段名称" prop="bdmc" align="center"></el-table-column>
          <el-table-column label="项目经理" prop="join_staff.xm" align="center"></el-table-column>
        </el-table>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button size="medium" @click="dialogFormVisible=false">取 消</el-button>
      <el-button
        size="medium"
        type="primary"
        @click="save"
        v-if="lookOrEdit != 3"
        :loading="loading"
      >保 存</el-button>
    </div>
    <!-- loading="true" -->
  </el-dialog>
</template>

<script>
export default {
  props: ["dialogFormVisible1", "item", "lookOrEdit", "codeLmlx"],
  data() {
    return {
      formLabelWidth: "150px",
      dialogFormVisible: false,
      loading: false,
      rules: {
        dwmc: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        frxm: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        zzjgdm: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        clsj: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        zjl: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        jsfzr: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        ygrs: [
          {
            required: true,
            message: "该值不能为空",
            trigger: "blur",
          },
        ],
        qyzz: [{ required: true, message: "该值不能为空", trigger: "blur" }],
      },
      form: {},
      tableData: [],
      saveHide: false,
      isShow: false,
    };
  },
  methods: {
    del(item, index) {
      this.form.join_eproject.splice(index, 1);
      this.isAddShow();
    },
    isAddShow() {
      this.form.join_eproject.some((vv) => {  //判断不能为空
        delete vv.id;
        delete vv.enterprise_id; 
        Object.values(vv).filter((v) => {
          if (v) {
            return v;
          }
        }).length
          ? (this.isShow = false)
          : (this.isShow = true);
        if (this.isShow) {
          return this.isShow;
        }
      });
    },
    add() {
      if (this.form.join_eproject) {
        this.form.join_eproject.unshift({});
        this.$nextTick(() => {
          this.$refs.tab.doLayout();
        });
      } else {
        this.form.join_eproject = [];
        this.form.join_eproject.unshift({});
        this.$nextTick(() => {
          this.$refs.tab.doLayout();
        });
        this.$forceUpdate();
      }
      this.isShow = true;
    },
    close() {
      this.$emit("close", this.saveHide);
    },
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.isShow) {
            this.$message({
              type: "error",
              message: "项目履历新增的不能为空",
            });
            return;
          }
          this.loading = true;
          let form = { ...this.form };
          if (form.join_eproject) {
            form.eproject = form.join_eproject;
            delete form.join_eproject;
            delete form.join_qyxmll;
            form.eproject.forEach((v) => {
              delete v.id;
              delete v.enterprose_id;
            });
          } else {
            form.eproject = [];
          }

          this.$post("/api/Enterprise/actions", form).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.saveHide = true; // 判断是否是保存
              this.dialogFormVisible = false;
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
            this.loading = false;
          });
        } else {
          return false;
        }
      });
    },
  },
  mounted() {},
  watch: {
    dialogFormVisible1(news) {
      this.dialogFormVisible = news;
      this.isShow = false;
      this.form = this.item;
      if (news) {
        this.saveHide = false;
        this.form.join_eproject = this.form.join_eproject
          ? [...this.form.join_eproject]
          : [];
        this.isAddShow();
      }
    },
  },
  computed: {},
};
</script>

<style scoped lang="less">
.title {
  // width: 120px;
  padding: 10px 12px;
  font-size: 18px;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;
  font-weight: 700;
  text-align: left;
  color: #409eff;
}
.main {
  width: 100%;
}
</style>